<template>
	<view class="agent">
		<u-toast ref="uToast"></u-toast>
		<u-no-network></u-no-network>
		<u-navbar title="代理查询">
			<view class="u-m-r-20" slot="right" @click="showPop()">
				筛选
			</view>

		</u-navbar>
		<view class="agent__head">
			<u-search placeholder="请输入代理名称或编号" v-model="params.searchValue" shape="square" bg-color="#f6f6f6"
				:show-action="false" @search="searchList()"></u-search>
		</view>
		<scroll-view class="home__grid-group mt-20" scroll-y @scrolltolower="onScrolltolower">
			<view>

				<u-card v-for="(item,index) in list" :key="index">
					<view class="flex  align-center" slot="head">

						<view class="flex-1 u-font-15 u-margin-left-10">
							{{item.userName}}
						</view>
						<view class="apply" @click="goConfigure(item.agentNo)">
							配置
						</view>
					</view>
					<view class="" slot="body">

						<view class="u-body-item u-flex  u-p-b-10">
							<view class="u-body-item-title u-line-2">代理编号：</view>
							<view class="">
								{{item.agentNo}}
							</view>
						</view>
						<view class="u-body-item u-flex  u-p-b-10">
							<view class="u-body-item-title u-line-2">电话：</view>
							<view class="">
								{{item.mobileNo}}
							</view>
						</view>
						<view class="u-body-item u-flex  u-p-b-10">
							<view class="u-body-item-title u-line-2">类型：</view>
							<view class="">
								{{item.userRole=="ORG"?"机构":"代理商"}}
							</view>
						</view>
					</view>
					<view class="card-footer" slot="foot">
						<view class="" @click="goDetail(item)">
							详情
						</view>
					</view>
				</u-card>
				<u-loadmore :status="status" />
			</view>
		</scroll-view>
		<u-popup v-model="showPopup" mode="center" negative-top="750" class="pop_filter" width="750rpx">
			<view>
				<view class="pop_filter__title u-margin-left-20">
					筛选类型
				</view>
				<view class="flex u-margin-top-20 u-margin-bottom-20">
					<view class="pop_filter__btn " :class="{'pop_filter__select':checked===index}"
						v-for="(item,index) in bindStates" :key="index" @click="selectBtn(
					'1',index)">
						{{item.label}}
					</view>
				</view>



				<view class="flex u-margin-20 u-padding-top-20">
					<u-button type="primary" class="flex-1 u-m-r-15" :custom-style="customCancelStyle"
						hover-class="false" @click="cancel()">重置</u-button>
					<u-button type="primary" class="flex-1 u-margin-left-15" :custom-style="customSubmitStyle"
						hover-class="false" @click="submitFilter()">确定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customCancelStyle: {
					// 注意驼峰命名，并且值必须用引号包括，因为这是对象
					backgroundColor: '#f6f6f6',
					color: 'black'

				},
				customSubmitStyle: {
					// 注意驼峰命名，并且值必须用引号包括，因为这是对象
					backgroundColor: '#9D60FF',
					color: 'white'
				},
				params: {
					"authenticationStatus": "",
					"merSubName": "",
					"searchValue": ""
				},

				pageNo: 1,
				pageSize: "10",
				list: [],
				scrollTop: 0,
				status: "loadmore",
				thumb: "/static/image/home/icon_examine_store.png",
				bindStates: [{
						label: '全部',
						value: '',
					},
					{
						label: '未认证',
						value: '0',
					},
					{
						label: '已认证',
						value: '1',
					}
				],
				showPopup: false,
				checked: null
			}
		},
		onReachBottom() {
			this.onScrolltolower();
		},
		mounted() {
			this.agentList();
		},
		methods: {
			showPop() {

				this.showPopup = !this.showPopup;

			},
			selectBtn(type, index) {
				if (type == "1") {
					this.checked = index;
				}

			},
			cancel() {
				const _that = this;
				_that.params.authenticationStatus = "";

				_that.checked = null;

			},
			submitFilter() {
				const _that = this;
				if (_that.checked) {
					_that.params.authenticationStatus = _that.bindStates[_that.checked].value;
				}

				_that.pageNo = 1;
				_that.list = [];
				_that.showPopup = false;
				_that.agentList();
			},
			goDetail(item) {
				this.$u.route({
					url: 'packageA/pages/main/agent/agentDetail',
					params: {
						agentNo: item.agentNo
					}
				})
			},
			searchList(e) {

				this.params.merchantNo = e;
				this.pageNo = 1;
				this.list = [];
				this.agentList();
			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			onScrolltolower() {
				this.status = "loading";
				this.agentList();
			},
			agentList() {
				const _that = this;
				this.$zx.user_api.agentList(this.pageNo, this.pageSize, this.params).then((data) => {

					console.log("data=" + JSON.stringify(data))
					_that.list = _that.list.concat(data);
					// console.log("data=" + JSON.stringify(_that.terminalList))
					if (data.length !== 0) {
						this.status = "loadmore";
						this.pageNo += 1;
					} else {
						this.status = "nomore";
					}
				});
			},
			goConfigure(agentNo) {
				this.$u.route({
					url: 'packageA/pages/main/agent/agentConfigure',
					params: {
						agentNo: agentNo
					}
				})
			}
		},

	}
</script>

<style scoped lang="scss">
	.agent {


		&__head {
			padding: 10rpx 20rpx;
			background-color: white;
		}
	}

	.pop_filter {
		position: absolute;
		top: 80rpx;

		&__title {
			font-weight: bold;
			height: 60rpx;
			line-height: 60rpx;
		}

		&__btn {
			background-color: #f6f6f6;
			width: 180rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			margin: 0 20rpx;
			border-radius: 10rpx;
		}

		&__input {
			background-color: #f6f6f6;
			margin: 0 20rpx;
			border-radius: 10rpx;

		}

		&__select {
			background-color: #F1E8FF;
			color: #9D60FF;
			background-image: url("/static/image/home/icon_filter_checked.png");
			background-position: right bottom;
			background-repeat: no-repeat;
		}
	}

	.apply {
		color: white;
		padding: 10rpx 40rpx;
		background-color: #9D60FF;
		border-radius: 50rpx;
	}
</style>